<template>
    <div class="tabbar" style="color:black">
        <div type="default" class="tab  center" @click="moreInfo">
            <span class="material-icons-outlined">assignment</span>
            <span style=" font-size: 32rpx">详情</span>
        </div>
        <div type="default" class="tab  center" @click="reset">
            <span class="material-icons-outlined">restart_alt</span>
            <span style=" font-size: 32rpx">重置</span>
        </div>
        <div type="primary" class="tab  center" @click="upload">
            <span class="material-icons-outlined">file_upload</span>
            <span style=" font-size: 32rpx">上传</span>
        </div>
    </div>
</template>

<script>
import Dialog from "@/wxcomponents/weapp/dist/dialog/dialog.js";
import $store from "@/store/index";
import throttle from "@/node_modules/lodash-es/throttle.js";
import Notify from "@/wxcomponents/weapp/dist/notify/notify";

export default {
    methods: {},
    components: {},
    methods: {
        moreInfo() {
            this.$emit("moreInfo");
        },
        reset() {
            Dialog.confirm({
                selector: "#van-dialog",
                title: "重置心语签",
                message: "心语签重置，已经上传的心语签不会变",
            })
                .then(() => $store.commit("resetEditingXin"))
                .catch((err) => {
                    console.log(err);
                });
        },
        upload: throttle(function () {
            Dialog.confirm({
                selector: "#van-dialog",
                title: "心语签上传后无法修改",
                message: "心语签上传后\n并经过审核后会向公众公开！",
            })
                .then((res) => {
                    Notify({
                        type: "success",
                        message: "上传心语签中",
                        selector: "#editor-notify",
                    });
                    return res;
                })
                .then(() => $store.dispatch("UploadXin"))
                .then(() => $store.commit("resetEditingXin"))
                .then(() =>
                    Notify({
                        type: "success",
                        message: "上传成功，请等待审核完成",
                        selector: "#editor-notify",
                    })
                )

                .catch((err) => {
                    Notify({
                        type: "danger",
                        message: "上传失败",
                        selector: "#editor-notify",
                    });
                    console.log(err);
                });
        }, 1000),
    },
};
</script>

<style lang="less" scoped>
.tab {
    width: 200rpx;
    background-color: #fafafa;

    font-size: 64rpx;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 10rpx;
    border-radius: 8rpx;
}

.tabbar {
    color: transparent;

    .circle {
        background-color: white;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
            0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border-radius: 50%;
        height: 100rpx;
        width: 100rpx;
        font-size: 64rpx;
    }

    padding: 15rpx 0;
    width: 100%;
    height: 110rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
</style>
